<template>
  <div class="user-info">
    <div>
      <fieldset class="electricity-info-w">
        <legend>收费:</legend>
        <div>
          <el-form :model="form" class="uI-form" label-width="120px">
            <div class="uI-form-item">
              <el-form-item label="上次余款">
                <el-input v-model="form.lastOwed" />
              </el-form-item>
              <el-form-item label="上次欠款">
                <el-input v-model="form.lastDebtOwed" />
              </el-form-item>
              <el-form-item label="本月电费">
                <el-input v-model="form.monthElePrice" />
              </el-form-item>
              <el-form-item label="违约金">
                <el-input v-model="form.liquidated" />
              </el-form-item>
            </div>
            <div class="uI-form-item">
              <el-form-item label="应交金额">
                <el-input disabled v-model="form.payableAmount" />
              </el-form-item>
              <el-form-item label="实缴金额">
                <el-input v-model="form.paidAmount" />
              </el-form-item>
            </div>
            <div class="uI-form-item">
              <el-form-item label="本次余款">
                <el-input disabled v-model="form.owed" />
              </el-form-item>
              <el-form-item label="本次欠款">
                <el-input disabled v-model="form.debtOwed" />
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="jsBtn">
          <el-button @click="settleAccounts">算账</el-button>
          <el-button @click="settlement">结算</el-button>
        </div>
      </fieldset>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useAppStore } from "@/stores";
import { storeToRefs } from "pinia";
const useApp = useAppStore();
let { calculationData } = storeToRefs(useApp);
const props = defineProps({
  position: String,
});
const form = reactive({
  lastOwed: "",
  lastDebtOwed: "",
  monthElePrice: "",
  liquidated: "",
  payableAmount: "",
  paidAmount: "",
  owed: "",
  debtOwed: "",
});
onMounted(() => {
  // 计算数据
  watch(
    calculationData.value,
    (newValue, oldValue) => {
      if (newValue[props.position] && newValue[props.position] != undefined) {
        if (
          newValue[props.position].zdf &&
          newValue[props.position].zdf != undefined
        ) {
          form.monthElePrice = newValue[props.position].zdf;
        }
      }
    },
    { immediate: true },
    { deep: true }
  );
});
//算账
const settleAccounts = () => {
  let payableAmount =
    Number(form.lastOwed) -
    Number(form.lastDebtOwed) -
    Number(form.monthElePrice) -
    Number(form.liquidated);
  form.payableAmount = Math.abs(payableAmount);
  form.owed = 0;
  form.debtOwed = 0;
};
// 结算
const settlement = () => {
  let owed =
    Number(form.lastOwed) -
    Number(form.lastDebtOwed) +
    Number(form.monthElePrice) +
    Number(form.liquidated);
  let debtOwed = Number(form.payableAmount) - Number(form.paidAmount);
  if (form.paidAmount) {
    if (debtOwed > 0) {
      form.debtOwed = debtOwed;
      form.owed = 0;
    } else {
      form.debtOwed = 0;
      form.owed = Math.abs(debtOwed);
    }
  } else {
    form.debtOwed = 0;
    form.owed = 0;
  }
};
</script>

<style lang="scss" scoped>
.user-info {
  width: 100%;
  .uI-form-item {
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ebeef5;
    .el-form-item {
      width: 50%;
      margin-bottom: 15px;
    }
  }
  .jsBtn {
    display: flex;
    justify-content: end;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
